<!--
 * @Description: 评价单编辑
 * @Autor: dyx
 * @Date: 2023-02-01 09:53:22
 * @LastEditTime: 2023-02-10 10:52:20
-->
<template>
  <transition name="el-zoom-in-center">
    <div class="JADP-preview-main">
      <div class="JADP-common-page-header">
        <el-page-header @back="goBack" content="评价表编辑"> </el-page-header>
      </div>
      <div class="JADP-common-layout-main JADP-flex-main">
        <div class="card">
          <el-card shadow="never">
            <el-row>
              <el-col :span="22">
                <h2>{{ dataForm.managename }}</h2>
                <div style="margin:10px 0">
                  <span class="timer"
                    >创建时间：{{ dataForm.creatortime }}</span
                  >
                  <el-button type="warning" plain
                    >共{{ list.length }}题</el-button
                  >
                  <el-button type="primary" plain v-show="dataForm.categore">{{
                    getDict("pingjiafeilei", dataForm.categore)
                  }}</el-button>
                </div>
                <div class="describe">
                  {{ dataForm.remark }}
                </div></el-col
              >
              <el-col :span="2" style="text-align: right;">
                <div class="fraction">
                  <span>{{ totalScore }}</span
                  >分
                </div>
                <el-button
                  icon="el-icon-edit"
                  @click="addOrUpdateHandle"
                  :disabled="isDetail"
                  >编辑</el-button
                >
              </el-col>
            </el-row>
          </el-card>
          <div style="margin-top: 10px">
            <el-button
              icon="el-icon-plus"
              type="primary"
              @click="addEvaluation"
              :disabled="isDetail"
              >新增评价项目</el-button
            >
            <el-button
              icon="el-icon-delete"
              type="danger"
              @click="batchDeletion"
              :disabled="isDetail"
              >批量删除</el-button
            >
            <el-button
              v-if="!isDetail"
              style="float:right"
              type="success"
              icon="el-icon-s-promotion"
              @click="release"
              >发布
            </el-button>
            <el-button
              v-else
              style="float:right"
              type="danger"
              icon="el-icon-s-promotion"
              @click="cancelRelease"
              >取消发布
            </el-button>
          </div>
          <el-checkbox-group v-model="multipleSelection">
            <el-card
              style="margin-top: 10px"
              v-for="(item, index) in list"
              :key="index"
            >
              <el-checkbox :label="item.id" :disabled="isDetail">
                <div class="row">
                  <div class="serialNumber">{{ index + 1 }}、</div>
                  <p>{{ item.name }}</p>
                  <div class="card-right">
                    <!-- <el-input
                      v-model="item.score"
                      class="input-with-select"
                      style="width:130px;margin-right:10px"
                      :disabled="isDetail"
                      @blur="setScore(item)"
                    >
                      <div slot="append">分</div>
                    </el-input> -->
                    <el-select
                      v-model="item.score"
                      :disabled="isDetail"
                      placeholder="请选择分值"
                      width="100px"
                      @change="setScore(item)"
                    >
                      <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item"
                        :value="item"
                      >
                      </el-option>
                    </el-select>
                    分
                    <el-button-group style="margin-left:10px">
                      <el-button
                        :disabled="isDetail"
                        icon="el-icon-sort-up"
                        @click="moveUp(index)"
                      ></el-button>
                      <el-button
                        :disabled="isDetail"
                        icon="el-icon-sort-down"
                        @click="moveDown(index)"
                      ></el-button>
                      <el-button
                        :disabled="isDetail"
                        icon="el-icon-delete"
                        type="danger"
                        @click="deleteHandle(item)"
                      ></el-button>
                    </el-button-group>
                  </div>
                </div>
              </el-checkbox>
            </el-card>
          </el-checkbox-group>
        </div>
      </div>
      <JADPForm v-if="formVisible" ref="JADPForm" @refresh="refresh" />
      <EvaluationForm
        v-if="evaluationVisible"
        ref="EvaluationForm"
        :manageid="dataForm.id"
        :categore="categore"
        :parentList="list"
        @submit="initData()"
      />
    </div>
  </transition>
</template>
<script>
import request from "@/utils/request";
import JADPForm from "./Form";
import EvaluationForm from "./evaluationForm";
export default {
  name: "changci",
  components: {
    JADPForm,
    EvaluationForm
  },
  data() {
    return {
      listLoading: false,
      formVisible: false,
      loading: false,
      evaluationVisible: false,
      dataForm: {},
      list: [],
      multipleSelection: [],
      categore: "",
      isDetail: false,
      options: [5, 10, 20, 50]
    };
  },
  computed: {
    totalScore() {
      let total = 0;
      this.list.forEach(item => {
        total += item.score * 1;
      });
      return total;
    }
  },

  methods: {
    goBack() {
      this.$emit("refresh", true);
    },
    init(id, categore) {
      this.dataForm.id = id || 0;
      this.initData();
      this.categore = categore;
      this.$nextTick(() => {
        this.loading = true;
        request({
          url: "/api/xy_pj_manage/Xy_pj_manage/" + this.dataForm.id,
          method: "get"
        }).then(res => {
          this.dataForm = res.data;
          this.isDetail = this.dataForm.releasestatus == 1;
          this.loading = false;
        });
      });
    },
    // 获取列表
    initData() {
      this.loading = true;
      request({
        url: "/api/xy_pj_manage_score/Xy_pj_manage_score",
        method: "get",
        data: {
          manageid: this.dataForm.id,
          organizeId:this.$store.getters.organizeId
        }
      }).then(res => {
        this.list = res.data;
        this.loading = false;
      });
    },
    addOrUpdateHandle() {
      this.formVisible = true;
      this.$nextTick(() => {
        this.$refs.JADPForm.init(this.dataForm.id);
      });
    },
    refresh() {
      this.formVisible = false;
      this.$nextTick(() => {
        this.init(this.dataForm.id);
      });
    },
    //新增
    addEvaluation() {
      this.evaluationVisible = true;
      this.$nextTick(() => {
        this.$refs.EvaluationForm.init(this.dataForm.id);
      });
    },
    //设置分数
    setScore(row) {
      request({
        url: "/api/xy_pj_manage_score/Xy_pj_manage_score/updateScoree",
        method: "put",
        data: {
          id: row.id,
          score: row.score
        }
      }).then(res => {
        this.$message.success(res.msg);
      });
    },
    //上移
    moveUp(index) {
      if (index == 0) {
        this.$message.warning("已经是第一条了");
        return;
      }
      request({
        url: "/api/xy_pj_manage_score/Xy_pj_manage_score/updateMove",
        method: "put",
        data: {
          manageScoreCrForms: [
            {
              id: this.list[index].id,
              move: this.list[index].move - 1
            },
            {
              id: this.list[index - 1].id,
              move: this.list[index - 1].move + 1
            }
          ]
        }
      }).then(res => {
        this.$message.success(res.msg);
        this.initData();
      });
    },
    //下移
    moveDown(index) {
      if (index == this.list.length - 1) {
        this.$message.warning("已经是最后一条了");
        return;
      }
      request({
        url: "/api/xy_pj_manage_score/Xy_pj_manage_score/updateMove",
        method: "put",
        data: {
          manageScoreCrForms: [
            {
              id: this.list[index].id,
              move: this.list[index].move + 1
            },
            {
              id: this.list[index + 1].id,
              move: this.list[index + 1].move - 1
            }
          ]
        }
      }).then(res => {
        this.$message.success(res.msg);
        this.initData();
      });
    },
    //批量删除
    batchDeletion() {
      if (!this.multipleSelection.length) {
        this.$message({
          type: "error",
          message: "请至少选择一条数据",
          duration: 1500
        });
        return;
      }
      const ids = this.multipleSelection.join();
      this.$confirm("您确定要删除这些数据吗, 是否继续？", "提示", {
        type: "warning"
      })
        .then(() => {
          request({
            url: `/api/xy_pj_manage_score/Xy_pj_manage_score//batchRemove/${ids}`,
            method: "DELETE"
          }).then(res => {
            this.$message({
              type: "success",
              message: res.msg
            });
            this.initData();
          });
        })
        .catch(() => {});
    },
    //删除
    deleteHandle(item) {
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        type: "warning"
      })
        .then(() => {
          request({
            url: `/api/xy_pj_manage_score/Xy_pj_manage_score//batchRemove/${
              item.id
            }`,
            method: "delete"
          }).then(res => {
            this.$message.success(res.msg);
            this.initData();
          });
        })
        .catch(() => {});
    },
    //发布
    release() {
      // // 判断是否有评价项目
      if (this.list.length==0) {
        return this.$message({
          message: "请选择评价项目",
          type: "warning"
        });
      }
      let scoreBol= false; ;
      this.list.filter(item => {
        if (item.score == null) {
          scoreBol = true;
          return this.$message({
            message: "请选择评价项目分值",
            type: "warning"
          });
        }
      });

      if (scoreBol) {
        return;
      }

      this.$confirm("您确定要发布吗, 是否继续？", "提示", {
        type: "warning"
      })
        .then(() => {
          request({
            url: "/api/xy_pj_manage/Xy_pj_manage/updateReleaseStatus",
            method: "put",
            data: {
              id: this.dataForm.id,
              releasestatus: 1 //0-未发布 1-已发布
            }
          }).then(res => {
            this.$message.success(res.msg);
            this.initData();
            this.isDetail = true;
          });
        })
        .catch(() => {});
    },
    //取消发布
    cancelRelease() {
      this.$confirm("您确定要取消发布吗, 是否继续？", "提示", {
        type: "warning"
      })
        .then(() => {
          request({
            url: "/api/xy_pj_manage/Xy_pj_manage/updateReleaseStatus",
            method: "put",
            data: {
              id: this.dataForm.id,
              releasestatus: 0 //0-未发布 1-已发布
            }
          }).then(res => {
            this.$message.success(res.msg);
            this.initData();
            this.isDetail = false;
          });
        })
        .catch(() => {});
    }
  }
};
</script>
<style scoped lang="scss">
.card {
  width: 1280px;
  padding: 10px;
  margin: 20px auto;
  .timer {
    margin-right: 20px;
    color: #aaaaaa;
  }
  .fraction {
    margin-bottom: 20px;
    color: rgb(236, 102, 26);
    span {
      font-size: 40px;
      font-family: "Segoe UI";
      font-weight: bold;
    }
  }
  li {
    list-style: none;
  }
  .row {
    width: 1250px;
    line-height: 25px;
    font-size: 16px;
    display: flex;
    p {
      width: 70%;
    }
    .card-right {
      width: 20%;
      text-align: right;
    }
  }
}
>>> .el-select .el-input__inner {
  width: 120px;
}
</style>
